import React from "react";
import "./index.less";
import MenuConfig from "../../config/menuConfig";
import { Menu, Icon } from "antd";
import {NavLink} from 'react-router-dom'
const SubMenu = Menu.SubMenu;
 

export default class NavLeft extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            menuTreeNode:''
        }
    }
  componentDidMount() {
    console.log(MenuConfig);
    const menuTreeNode = this.renderMenu(MenuConfig);
 
    this.setState({
      menuTreeNode
      
    });
 
    
  }
  renderMenu = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <SubMenu title={item.title} key={item.key}>
            {this.renderMenu(item.children)}
          </SubMenu>
        );
      }
      return (
        <Menu.Item title={item.title} key={item.title}>
            <NavLink to={'/admin'+item.key}>{item.title}{item.key}</NavLink>
        </Menu.Item>
      );
    });
  };

  render() {
    return (
      <div>
        <div className="logo">
          <img src="/assets/logo-ant.svg" alt="" />
          <h1>imooc m5 </h1>
        </div>
        <Menu theme="dark">{this.state.menuTreeNode}</Menu>
      </div>
    );
  }
}
